<template>
  <div>
    <div class="head" :class="{on:is_head}">
        <div class="name" v-if="is_name">
            {{title}}
        </div>
      <div class="container flex">
          <div class="logo" v-if="is_logo"><img src="../assets/images/logo-home.png" alt=""></div>
        <div @click="go_back()" class="back" v-if="is_back">
          <img src="../assets/images/Group1_1.png" alt="">
        </div>
        <div class="n_home" v-else>{{ titleLeft }}</div>

        <div class="flex1">

        </div>
          <slot name="right"></slot>
          <div class="kf" v-if="is_kf">
              <img src="../assets/images/icoi_kf.png" alt="">
          </div>
          <div class="lang" v-if="is_lang" @click="path_url('/my/lang')">
              <img src="../assets/images/ico_lang.png" alt="">
          </div>
        <div class="str" v-html="titleRight" v-if="is_right" @click="preserve">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      is_head:false
    }
  },
  name:"titleCenter",
  props:{
    titleLeft:{
      default:''
    },
    titleRight:{
      default:''
    },
    is_name:{
      default:''
    },
    title:{
      default:''
    },
    is_notice:{
      default:""
    },
    is_back:{
      default:false
    },
      is_logo:{
          default:false
      },
    is_custom_back:{
      default:false
    },
      is_kf:{
        default:false
      },
      is_lang:{
        default:false
      },
    is_right:{
      default:""
    },
  },
  created() {
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },

  methods:{
    handleScroll() {
      let t = document.documentElement.scrollTop || document.body.scrollTop;
      if (t > 100) {
        this.is_head = true;
      } else {
        this.is_head = false;
      }
    },

    preserve(){
      this.$emit('preserve')
    },
      path_url(url){
        this.$router.push(url)
      },
    go_back(){
      if(this.is_custom_back){
        this.$emit('go_back')
      }else{
        this.$router.go(-1);
      }


    },
    go_notice_url(){
      this.$router.push('/notice/index');
    }
  }
}
</script>
<style lang="less" scoped>

  .w856 {
    .head {
      width: 100%;
    }
  }

.flex {
  align-items: center;
}
  .head {
    // background: url("../assets/images/bg-html.png") no-repeat top center;
    // background-size: 100% auto;
    //background: #1A202E;
    padding: .22rem 0;
    position: relative;
    &.on {
      background-size: 100% 100%;
    }
    .n_home {
      font-size: .32rem;line-height: .44rem;
      font-weight: 500;
      color: #ffffff;
    }
    .name {
      font-size: .32rem;
      font-weight: 500;
      color: #ffffff;
      position: absolute;
      width: 70%;
      text-align: center;
      align-items: center;justify-content: center;
      top:0;left:50%;height: 100%;
      margin-left: -35%;
      display: flex;
      z-index: 0;
    }
    .notice {
      position: relative;
      img {
        height: .4rem;
      }
      span {
        position: absolute;
        background: #ee594b;
        border-radius: 50%;
        box-shadow: 0px .04rem .08rem 0px rgba(245,56,49,0.31);
        color: #fff;
        font-size: .2rem;
        padding: 0 .08rem;
        top:-.1rem;
        right: -.1rem;
      }
    }

    .back {
      img {
        width: 15px;
      }
    }
    img {
      height: 0.4rem;
      vertical-align: middle;
    }
    .lang {
      margin-left: .2rem;
    }
    .str {
      margin-left: .26rem;
      font-size: .28rem;
      font-weight: 500;
      color: #fff;
      line-height: .4rem;
      /deep/ img {
        height: .4rem;
        vertical-align: top;
      }
    }
  }
  .logo {
    img {
      height: 0.41rem;
    }
  }
</style>
